<template>
  <div>
    <div class="head">
      <el-form :model="queryForm" :inline="true">

        <el-form-item label="题型：">
          <el-select v-model="queryForm.type">
            <el-option v-for="(item,index) in questionTypes" :key="index" :value="item.type" :label="item.typeName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSelect">查询</el-button>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="delAllSelection">批量删除</el-button>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" class="down" @click="download">下载模板</el-button>
        </el-form-item>

        <el-form-item class="upload">
          <el-upload
                     action="http://211.69.16.108:9001/question/uploadExcel" :on-success="uploadSuccess" :on-error="uploadError"
          >
            <el-button type="primary" icon="el-icon-s-promotion">导入题目
            </el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <el-table :data="tableData"  border class="table" ref="multipleTable" header-cell-class-name="table-header"
                @selection-change="handleSelectionChange" highlight-current-row>
        <el-table-column  type="selection" align="center"/>
        <el-table-column prop="id" label="题目编号" min-width="70" align="center"/>
        <el-table-column label="题目类型" min-width="70" align="center">
          <template slot-scope="scope">
            {{formatType(scope.row.type)}}
          </template>
        </el-table-column>
        <el-table-column label="题干" min-width="300">
          <template slot-scope="scope">
            <span v-html="scope.row.title"></span>
          </template>
        </el-table-column>
        <el-table-column  label="答案" min-width="50">
          <template slot-scope="scope">
            <span v-html="scope.row.correctArray"></span>
          </template>
        </el-table-column>

        <el-table-column label="操作" min-width="150" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" class="editButton" icon="el-icon-edit" @click="handleAdd(scope.$index, scope.row)">添加
            </el-button>
            <el-button type="text" class="editButton" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button type="text"  icon="el-icon-delete" class="red deleteButton" @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="query.currentPage"
                       :page-size="query.pageSize" :total="query.total" @current-change="handlePageChange"/>
      </div>



      <!-- 编辑预览框 -->

    </div>
  </div>
</template>

<script>
  import question from '../../../utils/question'
  import {queryQuestionByPage,queryQuestionPage,queryQuestionByIdList,addQuestion,updateQuestion,deleteQuestion} from '../../../api/index'
  export default {
    name: 'QuestionList',
    data(){
      return {
        queryForm: {
          questionId: '',
          type: '',
        },
        multipleSelection: [],
        delList: [],
        questionTypes: [],
        tableData: [],
        query: {
          total: 8,
          pageSize: 7,
          currentPage: 1,
        },
        uploadFile: '',
        size:1
      }
    },
    created() {
      //this.getData();
    },

    activated: function() {
      this.getData();
    },

    mounted(){
      this.getData();
    },
    methods: {
      async getData() {


        let current = this.query.currentPage;
        let size = this.query.pageSize;
        const response = await queryQuestionPage({id:'',type:'',current:current, size:size});

        console.log(response);


        this.query.total = response.total;
        this.tableData = response.records;

        this.questionTypes = question.questionTypes;
      },

      /* 添加单道题目 */
      handleAdd(index,row){
        switch (row.type) {
          case 1:
            this.$router.push({path:'/singleCreate'});
            break;
          case 2:
            this.$router.push({path:'/multipleCreate'});
            break;
          case 3:
            this.$router.push({path:'/judgeCreate'});
            break;
          case 4:
            this.$router.push({path:'/fillCreate'});
            break;
          case 5:
            this.$router.push({path:'/shotAnswerCreate'});
            break;
          default:
            break;
        }
      },

      /* 编辑 */
      handleEdit(index,row){
        switch (row.type) {
          case 1:
            this.$router.push({path:'/singleCreate',query:{id: row.id}});
            break;
          case 2:
            this.$router.push({path:'/multipleCreate',query:{id: row.id}});
            break;
          case 3:
            this.$router.push({path:'/judgeCreate',query:{id: row.id}});
            break;
          case 4:
            this.$router.push({path:'/fillCreate',query:{id: row.id}});
            break;
          case 5:
            this.$router.push({path:'/shotAnswerCreate',query:{id: row.id}});
            break;
          default:
            break;
        }
      },

      async handleDelete(index, row) {

        let id = row.id;
        let questionList = [];
        //console.log(typeof id);
        questionList.push(id);
        console.log(questionList);

        await deleteQuestion({questionList:questionList});

        this.$message.success("删除成功!");

        this.getData();

      },

      formatType(type){

        switch (type) {
          case 1:
            return '单选题';
            break;
          case 2:
            return '多选题';
            break;
          case 3:
            return '判断题';
            break;
          case 4:
            return '填空题';
            break;
          case 5:
            return '简答题';
            break;
        }
      },

      onUploadChange(file){

        console.log(file);
        let form = new FormData();
        form.append("file",file);


        // 以后是file.raw
        this.uploadFile = file;
      },
      uploadSuccess(res){
        console.log(res);
        this.$message.success("导入成功!");
        this.getData();
      },
      uploadError(res){
        console.log(res);
        this.$message.success("导入失败!");
      },
      // 多选
      handleSelectionChange(val){
        this.multipleSelection = val;
      },
      // 多删
      async delAllSelection() {
        // 获得多选删除的id数组
        const length = this.multipleSelection.length;
        console.log(length);
        if (length === 0) {
          this.$message.error(`请选择要删除的对象`);
        } else {
          let questionList = [];
          this.delList = this.delList.concat(this.multipleSelection);
          for (let i = 0; i < length; i++) {
            questionList.push(this.multipleSelection[i].id);
          }

          console.log(questionList);

          await deleteQuestion({ questionList });
          this.$message.success("删除成功!");
          this.getData();
        }

      },
      async handlePageChange(val) {

        console.log(val);
        //let size = 7;
        //let current = val;
        let type = this.queryForm.type;
        let id = this.queryForm.questionId;
        const res = await queryQuestionPage({id:id,type:type,current:val ,size:7 });

        this.tableData = res.records;
        console.log(res);

      },
      async handleSelect() {
          let id = this.queryForm.questionId;
          let type = this.queryForm.type;

          console.log(id + "..." +type)
          const data =  await queryQuestionPage({id,type,current:1,size:7});

          this.tableData = data.records;
          this.query.total = data.total;
          console.log(data);
      },

      download(){
        this.$axios.request({
          url: '/question/download',
          method: 'get',
          responseType: 'blob',
        }).then(res => {
          const data = res.data;
          let url = window.URL.createObjectURL(data);
          let a = document.createElement('a');
          document.body.appendChild(a);
          a.href = url;
          a.download = '试题模板.xlsx';
          a.click();
          window.URL.revokeObjectURL(url);
        })
      }
    },
    watch: {
      '$route': 'getData'
    }
  };
</script>

<style scoped>
  .upload{
    float: right;
    margin-right: 10%;
  }


  .table {
    width: 100%;
    font-size: 14px;
  }

  .red {
    color: #ff0000;
  }



  /* 按钮大小 */
  .editButton,.deleteButton{
    font-size: 14px;
  }

  .remark{
    float: left;
    margin-left: 5%;
    width: 70%;
  }

  .down{
    margin-left: 100%;
  }

</style>
